<template>
    <div class="whole">
        <!-- {{ tableData }} -->
        <div class="title01">
            <div class="titleFont">设备历史分析</div>
            <el-row class="input_area">
                <span>
                    <div class="font1">设备:</div>
                    <el-select v-model="value_device" placeholder="请选择">
                        <el-option
                        v-for="item in options_devices"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </span>
                <span>
                    <div class="font1">设备点:</div>
                    <el-select v-model="value_sensor" placeholder="请选择">
                        <el-option
                        v-for="item in options_sensors"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </span>
                <span>
                    <div class="font1">自定义刻度:</div>
                    <el-input style="width: 89px;" placeholder="最小值" v-model="input_max"></el-input>
                    <span style="font-size: 20px;"> ~ </span>
                    <el-input style="width: 89px;" placeholder="最大值" v-model="input_min"></el-input>
                </span>
                <span>
                    <div class="font1" style="margin-left: 100px;">日期:</div>
                    <el-date-picker
                    v-model="value_timeSelector"
                    type="datetime"
                    placeholder="请选择">
                    </el-date-picker>
                </span>
                <span class="input_areaButton1">
                    <el-button icon="el-icon-upload2" @click="handleExport(exportWho)">导出</el-button>
                </span>
                <span class="input_areaButton2">
                    <el-button @click="handleQuery">查询</el-button>
                </span>
            </el-row>
        </div>
        <div class="main">
            <div class="bottom_title">
                <div class="font3">设备监测运行</div>
            </div>
            <div class="table_area">
                <div class="table_choicearea">
                    <div class="table_choices">
                        <div class="table_choiceaim" @click="showBar"><a href="#">柱状图</a></div>
                        <div class="table_choiceaim" @click="showPie"><a>饼状图</a></div>
                        <div class="table_choiceaim" @click="showLine"><a>折线图</a></div>
                        <div class="table_choiceaim" @click="showRadar"><a>雷达图</a></div>
                    </div>
                </div>
                <div ref="bar_diagram" class="myChart" v-show="is_bar"></div>
                <div ref="pie_diagram" class="myChart" v-show="is_pie"></div>
                <div ref="line_diagram" class="myChart" v-show="is_line"></div>
                <div ref="radar_diagram" class="myChart" v-show="is_radar"></div>
            </div>
        </div>
    </div>
</template>

<script>

import axios from 'axios'
import * as echart from 'echarts'

// ****************************************************

// 据选项查询内容 请求路径
let query_path = '/mock/dashanmao/DataAnalysis/analysisData.json'

// ****************************************************

export default {
    name: 'DataAnalysisDHA',

    data: function() {
        return {
            // 设备选择框
            options_devices: [{
                value: '选项1',
                label: '设备1'
                }, {
                value: '选项2',
                label: '设备2'
                }, {
                value: '选项3',
                label: '设备3'
                }, {
                value: '选项4',
                label: '设备4'
                }, {
                value: '选项5',
                label: '设备5'
                }],
            value_device: '',
            // 传感器选择框
            options_sensors: [{
                value: '选项1',
                label: '传感器1'
                }, {
                value: '选项2',
                label: '传感器2'
                }, {
                value: '选项3',
                label: '传感器3'
                }, {
                value: '选项4',
                label: '传感器4'
                }, {
                value: '选项5',
                label: '传感器5'
                }],
            value_sensor: '',
            // 时间范围选择框
            value_timeSelector: '',
            // 自定义刻度
            input_max: '',
            input_min: '',
            // 图表
            tableData: [
                { x:[], y:[] },
                { x:[], y:[] },
                { x:[], y:[] }
            ],
            // 调节显示
            is_bar: false,
            is_pie: false,
            is_line: false,
            is_radar: false,
            // 柱状图
            // 饼状图
            pie_datas: [
                {value: 67, name: '2024-12-01 07:00'},
                {value: 220, name: '2024-5-01 07:00'},
                {value: 163, name: '2024-6-01 07:00'},
                {value: 300, name: '2024-7-01 07:00'},
                {value: 10, name: '2024-8-01 07:00'},
                {value: 700, name: '2024-9-01 07:00'},
                {value: 500, name: '2024-10-01 07:00'},
                {value: 100, name: '2024-11-01 07:00'},
            ],
            // 折线图
            // 雷达图
            // 导出图表对象
            exportWho: {}
        }
    },
    computed: {
        xDataA() {
            return ( this.tableData[0].x || [] )
        },
        yDataA() {
            return ( this.tableData[0].y || [] )
        },
        xDataB() {
            return ( this.tableData[1].x || [] )
        },
        yDataB() {
            return ( this.tableData[1].y || [] )
        },
        xDataC() {
            return ( this.tableData[2].x || [] )
        },
        yDataC() {
            return ( this.tableData[2].y || [] )
        },
        radar_datay() {
            let tmp = [
                {
                    name: '2T温度A相',
                    value: this.tableData[0].y
                },
                {
                    name: '2T温度B相',
                    value: this.tableData[1].y
                },
                {
                    name: '2T温度C相',
                    value: this.tableData[2].y
                },
            ]

            return tmp
        },
        radar_datax() {
            let maxNum = 500
            let outcome = []
            for(let i=0; i<=this.tableData[0].x.length; i++){
                let tmp = {
                    name: this.tableData[0].x[i],
                    max: maxNum
                }

                outcome.push(tmp)
            }

            return outcome
        }
    },
    methods: {
        handleQuery: function() {
            axios.get(query_path, {
                params: {
                    deviceName: this.value_device,
                    sensorName: this.value_sensor,
                    minScale: this.input_min,
                    maxScale: this.input_max,
                    timeRanges: this.value_timeSelector
                }
            })
            .then((resp)=>{
                this.tableData = resp.data.data
                setTimeout(() => {
                    this.showBar()
                }, 100);
                window.alert("查询成功")
            })
            .catch((err)=>{
                window.alert("查询失败")
                console.log(err)
            })
            .finally(()=>{
                this.exportWho = this.$refs.bar_diagram
            })
        },
        handleExport: function(exportAim) {
            if(this.tableData[0].x.length==0){
                window.alert("请先查询数据")
                return
            }
            const chartContainer = exportAim
            const chartInstance = echart.getInstanceByDom(chartContainer)

            const imageDataURL = chartInstance.getDataURL({
                type: 'png',
                pixelRatio: 1,
                backgroundColor: '#fff'
            })

            const downloadLink = document.createElement('a')
            downloadLink.href = imageDataURL
            downloadLink.download = 'chart.png'
            
            downloadLink.click()
        },

        showBar: function() {
            if(this.tableData[0].x.length==0){
                window.alert("请先查询数据")
                return
            }
            this.is_line = false
            this.is_pie = false
            this.is_radar = false

            this.is_bar = true
            setTimeout(() => {
                this.draw_bar()
                this.exportWho = this.$refs.bar_diagram
            }, 100);
        },
        
        showPie: function() {
            if(this.tableData[0].x.length==0){
                window.alert("请先查询数据")
                return
            }
            this.is_line = false
            this.is_bar = false
            this.is_radar = false

            this.is_pie = true
            setTimeout(() => {
                this.draw_pie()
                this.exportWho = this.$refs.pie_diagram
            }, 100);
        },

        showLine: function() {
            if(this.tableData[0].x.length==0){
                window.alert("请先查询数据")
                return
            }
            this.is_pie = false
            this.is_bar = false
            this.is_radar = false

            this.is_line = true
            setTimeout(() => {
                this.draw_line()
                this.exportWho = this.$refs.line_diagram
            }, 100);
        },

        showRadar: function() {
            if(this.tableData[0].x.length==0){
                window.alert("请先查询数据")
                return
            }
            this.is_pie = false
            this.is_bar = false
            this.is_line = false

            this.is_radar = true
            setTimeout(() => {
                this.draw_radar()
                this.exportWho = this.$refs.radar_diagram
            }, 100);
        },
        // 图标
        // 柱状图
        draw_bar: function() {
            let myChart = echart.init(this.$refs.bar_diagram)

            var option = {
                grid: {
                    top: 100,
                    bottom: 200
                },
                legend: {},
                xAxis: {
                    data: this.xDataA,
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#cccccc',
                            width: 1
                        }
                    },
                    axisLabel: {
                        rotate: 340,
                        interval: 1
                    }
                },
                yAxis: {
                    name: '温度 (℃))',
                    nameLocation: 'center',
                    nameRotate: 90,
                    nameGap: 100,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                tooltip: {
                    trigger: "axis",
                    
                    axisPointer: {
                        type: "shadow"
                    }
                },
                series: [
                    {
                        name: "2T温度A相",
                        type: 'bar',
                        data: this.yDataA,
                        barGap: '20%',
                        barWidth: '10%',
                        itemStyle: {
                            color: '#c71f1f'
                        },
                    },
                    {
                        name: "2T温度B相",
                        type: 'bar',
                        data: this.yDataB,
                        barGap: '20%',
                        barWidth: '10%',
                        itemStyle: {
                            color: '#1fb0c7'
                        }
                    },
                    {
                        name: "2T温度C相",
                        type: 'bar',
                        data: this.yDataC,
                        barGap: '20%',
                        barWidth: '10%',
                        itemStyle: {
                            color: '#c7781f'
                        },
                    },
                ],
                dataZoom: [
                    {
                        type: 'slider',
                        start: 0,
                        end: (12 / this.xDataA.length) * 100,
                        showDetail: false,
                        handleSize: '100%',
                        fillerColor: '#f7e7e7',
                        height: 20,
                        handleStyle: {
                            color: '#fff',
                            borderColor: '#f7e7e7',
                            borderWidth: 1
                        }
                    }
                ]
            }

            window.onresize = myChart.resize

            myChart.setOption(option)
        },
        // 饼图
        draw_pie: function() {
            let myChart = echart.init(this.$refs.pie_diagram)

            var option = {
                grid: {
                    top: 100,
                    bottom: 200
                },
                series: [
                    {
                        name: '某一项',
                        type: 'pie',
                        data: this.pie_datas
                    }
                ],
            }

            window.onresize = myChart.resize

            myChart.setOption(option)
        },
        // 折现图
        draw_line: function() {
            let myChart = echart.init(this.$refs.line_diagram)

            var option = {
                grid: {
                    top: 100,
                    bottom: 200
                },
                legend: {},
                xAxis: {
                    data: this.xDataA,
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#cccccc',
                            width: 1
                        }
                    },
                    axisLabel: {
                        rotate: 340,
                        interval: 1
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '温度 (℃))',
                    nameLocation: 'center',
                    nameRotate: 90,
                    nameGap: 100,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                tooltip: {
                    trigger: "axis",
                    
                    axisPointer: {
                        type: "line"
                    }
                },
                dataZoom: [
                    {
                        type: 'slider',
                        start: 0,
                        end: (12 / this.xDataA.length) * 100,
                        showDetail: false,
                        handleSize: '100%',
                        fillerColor: '#f7e7e7',
                        height: 20,
                        handleStyle: {
                            color: '#fff',
                            borderColor: '#f7e7e7',
                            borderWidth: 1
                        }
                    }
                ],
                series: [
                    {
                        name: '2T温度A相',
                        data: this.yDataA,
                        type: 'line',
                        stack: 'efm'
                    },
                    {
                        name: '2T温度B相',
                        data: this.yDataB,
                        type: 'line',
                        stack: 'efm'
                    },
                    {
                        name: '2T温度C相',
                        data: this.yDataC,
                        type: 'line',
                        stack: 'efm'
                    },
                ]
            }

            window.onresize = myChart.resize

            myChart.setOption(option)
        },
        // 雷达图
        draw_radar: function() {
            let myChart = echart.init(this.$refs.radar_diagram)

            var option = {
                grid: {
                    top: 100,
                    bottom: 200
                },
                legend: {
                    data: ["2T温度A相", "2T温度B相", "2T温度C相"]
                },
                radar: [
                    {
                        indicator: this.radar_datax
                    }
                ],
                series: [
                    {
                        type: 'radar',
                        data: this.radar_datay
                    }
                ]
            }

            window.onresize = myChart.resize

            myChart.setOption(option)
        },
    },
    mounted() {
        // this.draw_bar()
    }
}
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none; 
        color: inherit;
    }
    
    .whole {
        /* background-color: pink; */
        background-color: rgb(241, 243, 244);
        width: 1712px;
        height: 1044px;
        padding-top: 12px;
        padding-bottom: 0;
    }

    .title01 {
        /* background-color: green; */
        background-color: white;
        width: 1688px;
        height: 125px;
        margin: 12px;
        margin-top: 0;
        padding-top: 20px;
    }

    .titleFont {
        width: 144px;
        height: 33px;
        font-size: 24px;
        font-weight: bold;
        margin-left: 20px;
    }

    .input_area {
        margin-top: 20px;
    }

    .input_area el-input el-input-suffix i {
        padding: 1000px;
    }
    
    .font1 {
        font-size: 14px;
        padding-left: 0px;
        padding-right: 8px;
        /* background-color: red; */
        margin-left: 30px;
        display: inline-block;
    }

    /* .input_kuang .el-input--suffix {
        width: 241px;
        height: 32px;
    } */
    /* :deep(.el-input__inner) {
        width: 241px;
        height: 32px;
    } */
    :deep(.el-input--suffix .el-input__inner) {
        padding-right: 30px;
        height: 32px!important;
        width: 241px;
    }

    .el-range-editor.el-input__inner {
        display: inline-flex;
        align-items: center;
        padding: 1px 10px;
        height: 32px;
    }
    .el-range-editor.el-input__inner[data-v-4aede454] {
        display: inline-flex;
        align-items: center;
        padding: 0px 10px;
        height: 32px;
        margin-top: 1px;
        width: 500px;
    }

    .input_areaButton1 {
        margin-left: 100px;
    }

    .input_areaButton1 >>> .el-button {
        color: #02A9AB;
        font-size: 14px;
        width: 73px;
        height: 32px;
        padding-left: 0.5%;
        padding-top: 0.5%;
    }

    .input_areaButton2 {
        margin-left: 10px;
    }

    .input_areaButton2 >>> .el-button {
        font-size: 14px;
        width: 60px;
        height: 32px;
        padding-left: 0.8%;
        padding-top: 0.5%;
        background: linear-gradient(136deg, #01A29D 0%, #1D75C3 100%);
        color: white;
    }

    /* main */

    .main {
        /* background-color: blue; */
        background-color: white;
        width: 1688px;
        height: 885px;
        margin: 12px;
        margin-top: 0;
        margin-bottom: 0;
    }



    :deep(.el-input__icon) {
        margin-top: -3px;
    }

    :deep(.el-input__inner) {
        height: 32px;
    }
    
    /* table */
    .bottom_title {
        /* background-color: pink; */
        height: 36px;
        padding-top: 16px;
    }

    .table_area {
        /* background-color: green; */
        /* background-color: white; */
        border: 1px solid rgb(224, 232, 231);
        height: 650px;
    }

    .table_choicearea {
        /* background-color: blue; */
        height: 40px;
        padding: 20px;
        padding-bottom: 0px;
    }

    .table_choiceaim {
        display: inline-block;
        /* background-color: grey; */
        width: 60px;
        height: 28px;
        font-size: 14px;
        border-bottom: 2px solid gray;
        padding-left: 18px;
        padding-top: 5px;
        color: #6D6E78;
    }

    .table_choiceaim:hover {

        border-bottom-color: #02A9AB;
        color: #2B2E3E;
        font-weight: bold;
    }

    .font3 {
        /* background-color: red; */
        width: 96px;
        height: 24px;
        margin-left: 16px;
        font-size: 16px;
    }

    .table_choices {
        /* background-color: purple; */
        height: 33px;
        width: 312px;
        border-bottom: 1px solid gray;
        margin-left: 1273px;
    }
    
    /* chartCSS */

    .myChart {
        /* background-color: #2B2E3E; */
        width: 1686px;
        height: 589px;
    }
</style>